<template>
  <div class="mainbox" v-for="item in this.$store.state.scriptList" :key="item">
    <img :src="$store.state.imgs + item.pictureUrl" alt="" class="img1" />
    <div class="right">
      <span class="title">{{ item.name }}</span>
      <div class="typeList">
        <div class="box">
          <a class="text">{{ item.peopleNum }}</a>
        </div>
        <div class="box">
          <a class="text">{{ item.background }}</a>
        </div>
      </div>
      <span class="paragraph">{{ item.introduction }}</span>
    </div>
    <span class="score">{{ item.score }}</span>
  </div>
</template>

<script>
import API from "@/api";
export default {
  data() {
    return {
      params: {},
    };
  },
  created() {
    this.getScriptList();
  },
  methods: {
    getScriptList() {
      API.getScriptAll(this.params).then(({ data }) => {
        this.$store.commit("setscriptList", data.data);
      });
    },
  },
};
</script>
<style scoped>
.mainbox {
  box-shadow: 0px 8px 40px 0px rgba(0, 0, 0, 0.1);
  background-color: rgba(255, 255, 255, 1);
  border-radius: 20px;
  width: 3.35rem;
  height: 1.2rem;
  margin: 0.105rem 0 0 0.2rem;
  position: relative;
  z-index: 80;
}
.img1 {
  width: 0.77rem;
  height: 1.02rem;
  margin: 0.095rem 0 0 0.09rem;
  float: left;
}
.right {
  width: 1.785rem;
  height: 0.895rem;
  margin: 0.1rem 0 0 0.11rem;
  float: left;
}
.title {
  width: 0.54rem;
  height: 0.135rem;
  color: rgba(51, 51, 51, 1);
  font-size: 0.14rem;
  font-family: PingFangSC-Medium;
  text-align: left;
  white-space: nowrap;
  line-height: 0.14rem;
  position: absolute;
  top: 0.1rem;
  left: 0.97rem;
}
.typeList {
  width: 1.78rem;
  height: 0.16rem;
  position: absolute;
  top: 0.355rem;
  display: flex;
  justify-content: flex-start;
}
.box {
  background-color: rgba(242, 229, 255, 1);
  border-radius: 16px;
  height: 0.16rem;
  width: 0.4rem;
  position: relative;
  margin-right: 0.1rem;
}
.text {
  width: 0.185rem;
  height: 0.095rem;
  color: rgba(51, 51, 51, 1);
  font-size: 0.1rem;
  font-family: PingFangSC-Medium;
  text-align: left;
  white-space: nowrap;
  line-height: 0.1rem;
  position: absolute;
  top: 0.03rem;
  left: 0.105rem;
}
.paragraph {
  width: 1.785rem;
  height: 0.25rem;
  color: rgba(102, 102, 102, 1);
  font-size: 0.1rem;
  font-family: PingFangSC-Light;
  text-align: justifyLeft;
  line-height: 0.15rem;
  position: absolute;
  top: 0.745rem;
  left: 0.97rem;
}
.score {
  width: 0.33rem;
  color: rgba(123, 71, 255, 1);
  font-size: 0.25rem;
  font-family: PingFangSC-Semibold;
  text-align: left;
  white-space: nowrap;
  line-height: 0.25rem;
  position: absolute;
  top: 0.915rem;
  left: 2.92rem;
}
</style>
